<template>
  <div>
    <!-- <div class="mainBox">
      <ul>
        <li
          :class="index == subjectindex ? 'hover' : ''"
          v-for="(item, index) in bindexamdata"
          @click="qhsubject(index, item.id,item.examId)"
          :key="index"
        >
          {{ item.name }}
        </li>
      </ul>
    </div> -->

    <div class="page-card top-tabs">
      <el-tabs v-model="examSubjectId" @tab-click="qhsubject">
        <el-tab-pane
          v-for="item in bindexamdata"
          :key="item.id"
          :label="item.name"
          :name="item.id.toString()"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="mainBox1" style="margin-top: 15px">
      <el-tabs v-model="tabnumber" @tab-click="studentorder">
        <el-tab-pane
          v-if="$auth.hasRole('admin')"
          label="任务总览"
          name="Taskoverview"
        ></el-tab-pane>
        <el-tab-pane
          v-if="$auth.hasRole('admin')"
          label="试题评阅系数"
          name="Evaluationcoefficient"
        ></el-tab-pane>
        <el-tab-pane
          label="学校分配情况"
          name="Schoolallocationsituation"
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { modellist } from "../../api/paperinfo/paperinfo.js";
export default {
  props: {
    bindexamdata: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      modellist: [],
      tabnumber: this.$auth.hasRole("admin")
        ? "Taskoverview"
        : "Schoolallocationsituation",
      examSubjectId: null,
    };
  },
  created() {
    this.examSubjectId = this.bindexamdata[0].id.toString();
  },
  mounted() {},
  methods: {
    studentorder() {
      let obj = {
        tabnumber: this.tabnumber,
      };
      this.$emit("geturldata", obj);
    },
    qhsubject() {
      sessionStorage.setItem("examSubjectId", this.examSubjectId);
      let obj = {
        tabnumber: this.tabnumber,
        id: Number(this.examSubjectId),
      };
      this.$emit("qhsubject", obj);
    },
  },
};
</script>

<style scoped>
.mainBox {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.mainBox >>> .el-button {
  background: #366ef4;
  border: solid 1px #366ef4;
  height: 36px;
}

.mainBox >>> .el-select .el-input__inner {
  width: 150px;
  margin-left: 4px;
  border-radius: 10px;
  height: 36px;
}

.mainBox >>> .el-input__icon {
  line-height: 36px;
}

.mainBox >>> .distpicker-address-wrapper select {
  height: 35px;
  line-height: 35px;
  border-radius: 10px;
  font-size: 14px;
  color: #999;
  border: solid 1px #dcdfe6;
}

.mainBox ul {
  width: 100%;
  display: flex;
  align-items: center;
}

.mainBox ul li {
  font-size: 14px;
  margin-right: 15px;
  padding: 0 10px;
  line-height: 36px;
  cursor: pointer;
  border-bottom: solid 2px #fff;
  font-weight: 700;
  position: relative;
  color: #8e96a4;
}
.mainBox ul li:hover::after,
.mainBox ul li.hover::after {
  content: "";
  width: 24px;
  height: 4px;
  background: #1a48db;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  color: #2b313c;
}
.mainBox ul li:hover,
.mainBox ul li.hover {
  color: #2b313c;
}
.mainBox div {
  color: #5b6371;
  font-size: 14px;
}
.mainBox1 {
  background: #fff;
  border-radius: 4px;
  padding: 0 15px;
}
.mainBox1 >>> .el-button {
  background: #366ef4;
  border: solid 1px #366ef4;
  height: 36px;
}
.mainBox1 >>> .el-select .el-input__inner {
  width: 150px;
  margin-left: 4px;
  border-radius: 10px;
  height: 36px;
}
.mainBox1 >>> .el-input__icon {
  line-height: 36px;
}
.mainBox1 >>> .distpicker-address-wrapper select {
  height: 35px;
  line-height: 35px;
  border-radius: 10px;
  font-size: 14px;
  color: #999;
  border: solid 1px #dcdfe6;
}
.mainBox1 ul {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: solid 1px #f5f6f8;
}
.mainBox1 ul li {
  font-size: 14px;
  margin-right: 15px;
  padding: 0 10px;
  line-height: 36px;
  cursor: pointer;
  font-weight: 700;
  position: relative;
  color: #8e96a4;
}
.mainBox1 ul li:hover::after,
.mainBox1 ul li.hover::after {
  content: "";
  width: 24px;
  height: 4px;
  background: #1a48db;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  color: #2a303b;
}
.mainBox1 ul li:hover,
.mainBox1 ul li.hover {
  color: #2a303b;
}
.mainBox1 div {
  color: #5b6371;
  font-size: 14px;
}
</style>